<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <title>注册</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <!-- daterange picker -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
  <!-- bootstrap datepicker -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/all.css">
  <!-- Bootstrap Color Picker -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
  <!-- Bootstrap time Picker -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.css">
  
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.css">
  
  <!-- Select2 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/select2/select2.min.css">
    
    <!-- Theme style -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/skins/skin-blue.min.css">
    <!--zTree -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/zTree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/zTree/css/metroStyle.css" type="text/css">
  </head>
  
  <body class="hold-transition skin-blue sidebar-mini">
  	<%-- <header class="main-header" id="main-header" data-id="${pageContext.request.contextPath}">
  	<div class="container wrapper" id="registerDiv">
  			<jsp:include page="../module/head.jsp"/>
    		<!--<form action="${pageContext.request.contextPath}/student/studentMessagePost" method="post">-->
            <div class="form-group has-feedback">
            	<label>姓名</label>
                <input type="text" class="form-control" id="name" regular="/[\u4E00-\u9FA5]{2,7}/g"  vname="姓名"  errMsg="联系人只能输入2-6位汉字" />
            </div>
			<div class="form-group">
                  <label>性别</label>
                  	<select id="sex" name="sex" class="form-control select2">
                  		<option value="0" selected="selected">男</option>
                  		<option value="1">女</option>
                  	</select>
            </div>
            <div class="form-group has-feedback">
            	<label>学号</label>
                <input type="text" class="form-control" id="studentId" regular="/^2\d{9}$/"  vname="学号"  errMsg="必须是以2开头的十位数字"/>
            </div>
            <div class="form-group">
                  <label>年级</label>
                  	<select id="senior" name="senior" class="form-control select2">
                  		<option value="0" selected="selected">大一</option>
                  		<option value="1">大二</option>
                  		<option value="2">大三</option>
                  		<option value="3">大四</option>
                  		<option value="4">研一</option>
                  		<option value="5">研二</option>
                  		<option value="6">其他</option>
                  	</select>
            </div>
            <div class="form-group has-feedback">
            	<label>电话号码</label>
                <input type="text" class="form-control" id="tel" regular="/^1\d{10}$/"  vname="手机号码"  errMsg="电话号码格式有误"/>
            </div>
            <div class="form-group has-feedback">
            	<label>电子邮箱</label>
                <input type="text" class="form-control" id="email" regular="/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/"  vname="电子邮箱"  errMsg="邮箱格式不正确"/>
            </div>
            <div class="row">
                  <div class="col-md-8">
                    <div class="form-group">
                      <label>其他说明</label>
                      <textarea id="content" name="content" style="width: 100%;" ></textarea>
                    </div>
                  </div>
                </div>
            <div class="row">
                <div class="col-xs-4">
                    <button type="submit" id="btn" onclick="register();" class="btn btn-primary btn-block btn-flat">下一步</button>
                </div>
            </div>
        <!-- </form>-->
    	</div> --%>
    <%-- <script src="${pageContext.request.contextPath}/plugins/jquery-3.1.1.js"></script>
	<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
  	 --%>
  	<div class="wrapper">

    <jsp:include page="../module/head.jsp"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
		<section class="content-header">
            <h1>
                社团管理系统
                <small>注册界面</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/index"><i class="fa fa-dashboard"></i>首页</a></li>
                <li class="active">注册</li>
            </ol>
        </section>
        <hr>
        <div align="center"><p class="h3">第一步：录入学生信息</p></div>
         <!--证书新增-->
          <section class="content">
        <div class="tab-pane">
              <div class="box-body">
                <div class="row">
                  <!--第一列-->
                  <div class="col-md-6">
                  <div class="form-group has-feedback">
            	<label>姓名</label>
                <input type="text" class="form-control" id="name" regular="/[\u4E00-\u9FA5]{2,7}/g"  vname="姓名"  errMsg="联系人只能输入2-6位汉字" />
            </div>
			<div class="form-group">
                  <label>性别</label>
                  	<select id="sex" name="sex" class="form-control select2">
                  		<option value="0" selected="selected">男</option>
                  		<option value="1">女</option>
                  	</select>
            </div>
            <div class="form-group has-feedback">
            	<label>学号</label>
                <input type="text" class="form-control" id="studentId" regular="/^2\d{9}$/"  vname="学号"  errMsg="必须是以2开头的十位数字"/>
            </div>
            
            
           
                </div>
                <div class="col-md-6">
                	<div class="form-group">
                  <label>年级</label>
                  	<select id="senior" name="senior" class="form-control select2">
                  		<option value="0" selected="selected">大一</option>
                  		<option value="1">大二</option>
                  		<option value="2">大三</option>
                  		<option value="3">大四</option>
                  		<option value="4">研一</option>
                  		<option value="5">研二</option>
                  		<option value="6">其他</option>
                  	</select>
            </div>
            <div class="form-group has-feedback">
            	<label>电话号码</label>
                <input type="text" class="form-control" id="tel" regular="/^1\d{10}$/"  vname="手机号码"  errMsg="电话号码格式有误"/>
            </div>
            <div class="form-group has-feedback">
            	<label>电子邮箱</label>
                <input type="text" class="form-control" id="email" regular="/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/"  vname="电子邮箱"  errMsg="邮箱格式不正确"/>
            </div>
                </div>
                </div>
                <div class="row">
                  <div class="col-md-8">
                    <div class="form-group">
                      <label>备注</label>
                      <textarea type="text" id="content" name="content" style="width: 100%;"></textarea>
                    </div>
                  </div>
                </div>
                 <div class="row">
                 <div class="col-md-4"></div>
                <div class="col-md-4">
                    <button type="submit" id="btn" onclick="register();" class="btn btn-primary btn-block btn-flat">下一步</button>
                </div>
            </div>

              </div>
              
        </div>
 	
	</section>
    </div>
    </div>
    <!-- Main Footer -->
    <jsp:include page="../module/foot.jsp" />


<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- Bootstrap 3.3.6 -->
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
<script src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap color picker -->
<script src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- AdminLTE App -->
<script src="${pageContext.request.contextPath}/dist/js/app.min.js"></script>
<!-- bootstrap time picker -->
<script src="${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- DataTables -->
<script src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- zTree -->
<script src="${pageContext.request.contextPath}/plugins/zTree/js/jquery.ztree.core.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/zTree/js/jquery.ztree.excheck.min.js"></script>

<!--自己写的js文件依赖jQ-->
<script src="${pageContext.request.contextPath}/plugins/aPudding/js/main.js"></script>
  	<script type="text/javascript">
  	
  	
  		$(document).ready(function(){  
          $("input").focus(function(){  
                  
          });  
          $("input").blur(function(){  
                var value=this.value; //获得文本框的值  
                var id=this.id;  //获得文本框的ID  
                var vname=$("#"+this.id).attr("vname"); //验证标签  
                var regular=$("#"+this.id).attr("regular"); //自定义验证  
                var errMsg=$("#"+this.id).attr("errMsg"); //提示信息  
                var fid="f"+id;  
                var flag=true;  
                if(isEmpty(value)){   
                    msg=vname+"不能为空!";  
                }else {  
                    $("#"+fid).remove();  
                    if(isEmpty(regular)){  
                        return;  
                    }  
                    var re=eval(regular);  //转义成正则表达式  
                    if(re.test(value)){  
                            flag=false;  
                    }else{  
                        msg=errMsg;  
                    }  
                      
                }  
                if(flag){  
                    var fidv=$("#"+fid);  
                    if(fidv.length!=1)  
                    $("#"+id).after("<font style=\"color:red\" id="+fid+">"+msg+"</font>");  
                    }  
                  
          });  
        });  
		function isEmpty(value){  
	         if(undefined==value||value==""||value==null){  
	             return true;  
	         }else{  
	             return false;  
	         }  
	     };  
  	
		function register(){  
			
			if($("#registerDiv").find("font").length>0){  
			     alert("验证不通过");  
            	return false;  
			}else{
				return true;
			}
				
		}  
  	
  		function getParams(){
  			var name=$('#name').val();
  			var sex = $('#sex').val();
  			var studentId = $('#studentId').val();
  			var senior = $('#senior').val();
  			var tel = $('#tel').val();
  			var email = $('#email').val();
  			var content = $('#content').val();
  			
  			var data ={
  				"name" : name,
  				"sex" : sex,
  				"studentId" : studentId,
  				"senior" : senior,
  				"tel" : tel,
  				"email" : email,
  				"content" : content
  			};
  			
  			return data;
  		}
  		
  		$(function(){
  			$('#btn').click(function(){
  				var data = getParams();
  				alert(data.email);
  				var bool = check_data(data);
  				alert(bool);
  				if(bool==true)
  					submit(data);
  			});
  		
  		});
  		
  	//实现表单验证
    function check_data(data)
	{
		
		if (data.name=="")
		{
			alert("真实姓名不能为空");
			return false;
		}
		if (data.studentId=="")
		{
			alert("学号不能为空");
			return false;
		}
		if (data.tel=="")
		{
			alert("电话不能为空");
			return false;
		}
		if (data.email=="")
		{
			alert("电子邮件不能为空");
			return false;
		}
		return true;
	}
	
	function submit(data){
		var root = $('#main-header').attr("data-id");
		
		$.ajax({
			url : root+"/student/studentMessagePost" ,
			type : 'POST',
			dataType : 'json',
			data : data
		}).done(function(data){
				
				alert("学生信息录入成功！");
				var Email = $('#email').val();
				var StudentId = $('#studentId').val();
				setTimeout(function(){
					window.location.href = root+"/user/userAdd?email="+Email+"&studentId="+StudentId;
				},1000*2);
				//返回主页
			}).fail(function(){
				console.log("error");
			}).always(function(){
				console.log("complete");
			});
	}
  		
  	</script>
  </body>
</html>
